<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>魏鹏&陈林 的婚礼邀请函</title>
  <link rel="stylesheet" href="./public/css/zepto.fullpage.css">
  <link rel="stylesheet" href="./public/css/animate.css">
  <link rel="stylesheet" href="./public/css/index.css">
  <script src="./public/js/audio.js"></script>
  <style type="text/css">
    @font-face {
      font-family: wawa;
      src: url("./public/font/SanJiMengWaJianTi-2.woff");
    }

    html,
    body,
    h4 {
      font-family: wawa !important;
    }

    html {
      background-color: #ecf1f7;
    }

    #loading-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #e2ecf5;
      z-index: 99;
    }

    .loading-box {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -150px;
      display: block;
      width: 300px;
      height: 300px;
      border-radius: 3px;
      font-size: 30px;
      color: rgba(64, 158, 255, .5);
      text-align: center;
    }

    .loading-box p {
      font-size: 16px;
      margin: 16px 0;
    }

    .loading:before,
    .loading:after,
    .loading {
      display: inline-block;
      width: 1em;
      height: 1em;
      color: inherit;
      vertical-align: middle;
      pointer-events: none;
      border-radius: 50%;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation: loading 1.8s infinite ease-in-out;
      animation: loading 1.8s infinite ease-in-out;
    }

    .loading {
      color: currentcolor;
      position: relative;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
      top: -1em;
    }

    .loading:before {
      right: 100%;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .loading:after {
      left: 100%;
    }

    .loading:before,
    .loading:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      width: inherit;
      height: inherit;
    }

    @-webkit-keyframes loading {

      0%,
      80%,
      100% {
        box-shadow: 0 1em 0 -1em;
      }

      40% {
        box-shadow: 0 1em 0 -.2em;
      }
    }

    @keyframes loading {

      0%,
      80%,
      100% {
        box-shadow: 0 1em 0 -1em;
      }

      40% {
        box-shadow: 0 1em 0 -.2em;
      }
    }

    .load-img {
      visibility: hidden;
    }
  </style>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="./public/js/jquery.js"></script>
  <script src="./public/js/wx.js" type="module"></script>
  <script type="text/javascript">
    var loadSum = 0
    var isMobile = null

    function loadDone() {
      loadSum++
    }

    function pcTip() {
      if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        console.log('mobile')
        isMobile = true
      } else {
        console.log('pc')
        loadSum = loadSum - 10
        isMobile = false
        document.getElementById('loading-txt').innerHTML = '请使用手机或其它移动设备打开!'
      }
    } 
  </script>
</head>

<body>
  <div id="loading-mask">
    <div class="loading-box">
      <div class="loading"></div>
      <p id="loading-txt">加载中</p>
    </div>
  </div>
  <div id="play-btn"><i class="iconfont" style="font-size: 20px;">&#xe617;</i></div>
  <img class="load-img" onload="loadDone();pcTip()" src="./public/photo/1.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/2.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/3.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/4.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/6.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/7.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/8.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/9.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/10.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/11.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/12.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/13.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/14.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/15.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/16.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/17.jpg">
  <img class="load-img" onload="loadDone()" src="./public/photo/18.jpg">
  <audio id="mp3" src="./public/music/music.mp3" loop></audio>
  <div class="wp">
    <div class="wp-inner">
      <div class="page page0" style="display: none;">
        <div id="type" class="full-bg js-animate animated animation-800">
          <div id="type1"></div>
        </div>
      </div>
      <div class="page page1" style="display: none;">
        <div class="photo-wrap">
          <div class="full-bg js-animate animated animation-8000"
            style="background-image: url(./public/photo/1.jpg);width: 100%;height: 100%;position: absolute;top:0;left: 0;"
            data-sec="zoomCycle" data-time="0">
          </div>
          <div class="full-bg js-animate animated animation-2000"
            style="background-image: url(./public/photo/2.jpg);width: 100%;height: 100%;position: absolute;top:0;left: 0;"
            data-sec="myzoomIn" data-time="12500">
          </div>
          <div class="text-frame js-animate animated" data-animate="rotateIn" data-time="500">

          </div>
          <div class="text-frame js-animate animated" data-animate="rotateIn" data-time="1200" data-sec="pulseing"
            data-sectime="1200">
          </div>
        </div>
        <div class="ele-wrap">
          <h4 class="js-animate animated animation-500" data-animate="bounceInDown" data-time="500" data-sec="zoomOut"
            data-sectime="700" style="position: absolute;top: 40%;width: 100%;text-align: center;">准备</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="1500"
            data-sec="bounceOutUp" data-sectime="500" style="position: absolute;top: 40%;left: 15%">准备</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="1500"
            data-sec="bounceOutDown" data-sectime="500" style="position: absolute;top: 40%;right: 15%">好了吗</h4>

          <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="2500"
            data-sec="rotateOutDownLeft" data-sectime="500"
            style="position: absolute;top: 40%;width: 100%;text-align: center;">
            <h4>这</h4>
            <h4 style="margin-top: 10%;">是一个</h4>
          </div>
          <h4 class="js-animate animated animation-500" data-animate="swing" data-time="3000" data-sec="zoomOutDown"
            data-sectime="500" style="position: absolute;top: 20%;width: 100%;text-align: center;">
            ❤️甜蜜的❤️
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="swing" data-time="3500" data-sec="fadeOutUpBig"
            data-sectime="500" style="position: absolute;top: 30%;width: 100%;text-align: center;">
            婚礼
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="swing" data-time="3500" data-sec="fadeOutDownBig"
            data-sectime="500" style="position: absolute;top: 40%;width: 100%;text-align: center;">
            邀请函
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="4000" data-sec="fadeOutUp"
            data-sectime="500" style="position: absolute;top: 35%;width: 100%;text-align: center;">
            各位
          </h4>
          <!-- <h4 class="js-animate animated animation-500"
                        data-animate="fadeInUp"
                        data-time="4500"
                        data-sec="fadeOutUp"
                        data-sectime="5000"
                        style="position: absolute;top: 10%;width: 100%;text-align: center;">
                        各位
                    </h4> -->
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4500" data-sec="zoomOut"
            data-sectime="3600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
            姨娘
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4700" data-sec="zoomOut"
            data-sectime="3400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
            姨夫
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4900" data-sec="zoomOut"
            data-sectime="3200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
            伯伯
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5100" data-sec="zoomOut"
            data-sectime="3000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
            婶婶
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5300" data-sec="zoomOut"
            data-sectime="2800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
            姑姑
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5500" data-sec="zoomOut"
            data-sectime="2600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
            姑爷
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5700" data-sec="zoomOut"
            data-sectime="2400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
            侄儿
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5900" data-sec="zoomOut"
            data-sectime="2200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
            侄女
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6100" data-sec="zoomOut"
            data-sectime="2000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
            兄弟
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6300" data-sec="zoomOut"
            data-sectime="1800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
            姐妹
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6500" data-sec="zoomOut"
            data-sectime="1600" style="position: absolute;top: 60%;left: 35%;text-align: center;">
            舅舅
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6700" data-sec="zoomOut"
            data-sectime="1400" style="position: absolute;top: 40%;right: 40%;text-align: center;">
            舅妈
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6900" data-sec="zoomOut"
            data-sectime="1200" style="position: absolute;top: 23%;left: 40%;text-align: center;">
            同事
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7100" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 45%;right: 28%;text-align: center;">
            同学
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7300" data-sec="zoomOut"
            data-sectime="800" style="position: absolute;top: 58%;right: 20%;text-align: center;">
            好友
          </h4>

          <h4 class="js-animate animated animation-600" data-animate="bounceInDown" data-time="8000" data-sec="zoomOut"
            data-sectime="1500" style="position: absolute;top: 30%;width: 100%;text-align: center;">
            诚<br>挚
          </h4>
          <h4 class="js-animate animated animation-600" data-animate="bounceInUp" data-time="8500" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 45%;width: 100%;text-align: center;">
            邀<br>请
          </h4>

          <h4 class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="9500" data-sec="slideOutUp"
            data-sectime="1100" style="position: absolute;top: 30%;width: 100%;text-align: center;">
            您
          </h4>
          <h4 class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="10000"
            data-sec="slideOutDown" data-sectime="600"
            style="position: absolute;top: 45%;width: 100%;text-align: center;">
            携家人
          </h4>
          <h3 class="js-animate animated animation-500" data-animate="bounceInUp" data-time="11000"
            data-sec="zoomOutDown" data-sectime="600"
            style="position: absolute;top: 20%;width: 100%;text-align: center;letter-spacing: 3px;line-height: 40px;">
            参加<br>我们的婚礼
          </h3>
          <h2 class="js-animate animated" data-animate="bounceInDown" data-time="12500"
            style="position: absolute;top: 28%;width: 100%;text-align: center;font-size: 32px;font-weight: 500;">
            ❤️10月3日❤️<br>癸卯兔年辛酉月甲午日<br>我<br>们<br>结<br>婚<br>啦<br>👩‍❤️‍👨
          </h2>
        </div>
      </div>
      <div class="page page2" style="display: none;">
        <div class="photo-wrap">
          <div class="full-bg js-animate animated animation-1000"
            style="background-image: url(./public/photo/3.jpg);width: 100%;height: 100%;" data-animate="myzoomIn">
          </div>
        </div>
        <div class="ele-wrap">
          <div class="js-animate animated" data-animate="bounceInDown" data-time="0"
            style="position: absolute;top: 60%;width: 80%;left: 15%;text-align: center;">
            <img style="max-width: 100%;" src="./public/meta/wedding.png">
          </div>
          <div style="position: absolute;top: 69%;left: 0;width: 100%;text-align: center;height: 20%;">
            <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="500"
              src="./public/meta/hun.png" style="position: absolute;left: 15%;">
            <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="600"
              src="./public/meta/li.png" style="position: absolute;left: 30%;">
            <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="700"
              src="./public/meta/yao.png" style="position: absolute;left: 44%; top: 5%;">
            <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="800"
              src="./public/meta/qing.png" style="position: absolute;left: 56%;top: 5%;">
            <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="900"
              src="./public/meta/han.png" style="position: absolute;left: 69%;top: 5%;">
          </div>
          <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="1500"
            style="position: absolute;top: 80%;text-align: center;">
          </div>
          <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="2000"
            style="position: absolute;top: 80%;text-align: center;">
            <div class="js-animate animated animation-500" data-animate="fadeInRight" data-time="2500"
              style="position: absolute;left: 10%;">
              新娘: 陈林
            </div>
            <div class="js-animate animated animation-500" data-animate="fadeInLeft" data-time="2500"
              style="position: absolute;right: 10%;">
              新郎: 魏鹏
            </div>
            <div class="js-animate animated animation-800 circle-box" data-animate="myzoomIn" data-time="3000"
              data-sec="shake" data-sectime="800">
              <img src="./public/meta/zuanshi.png">
            </div>
          </div>
          <div class="js-animate animated" data-animate="bounceInUp" data-time="3800"
            style="position: absolute;top: 88%;left: 0;width: 100%;text-align: center;color: #3a3f58;font-size: 16px;">
            邀请你参加我们的婚礼
          </div>
          <div class="js-animate animated animation-2000" data-animate="zoomIn" data-time="5000"
            style="position: absolute;top: 95%;left: 0;width: 100%;text-align: center;">
            <img src="./public/meta/invitation.png" style="max-width: 75%;">
          </div>
        </div>
      </div>
      <div class="page page3" style="display: none;">
        <div class="photo-wrap">
          <div class="full-bg js-animate animated animation-5000"
            style="background-image: url(./public/photo/6.jpg);width: 100%;height: 100%;" data-sec="zoomCycle"
            data-time="0">
          </div>
          <div class="full-bg js-animate animated animation-800"
            style="background-image: url(./public/photo/4.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
            data-animate="zoomIn" data-time="10500">
          </div>
          <div class="text-frame js-animate animated" data-animate="bounceInUp" data-time="1000" data-sec="fadeOutUp"
            data-sectime="9000">

          </div>
          <div class="text-frame js-animate animated" data-animate="bounceInDown" data-time="1000"
            data-sec="fadeOutDown" data-sectime="9000">
          </div>
        </div>
        <div class="ele-wrap">
          <h4 class="js-animate animated animation-800" data-animate="myzoomIn" data-time="1500" data-sec="zoomOut"
            data-sectime="800" style="position: absolute;top: 40%;width: 100%;text-align: center;">她是</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500"
            data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
            人见</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY"
            data-sectime="500" style="position: absolute;top: 50%;width: 100%;text-align: center;">人爱</h4>

          <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000"
            data-sec="zoomOutDown" data-sectime="500"
            style="position: absolute;top: 45%;width: 100%;text-align: center;">
            <h4>花见</h4>
            <h4>花开</h4>
          </div>
          <h2 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut"
            data-sectime="3000" style="position: absolute;top: 35%;width: 100%;text-align: center;">
            集
          </h2>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut"
            data-sectime="2600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
            温柔
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut"
            data-sectime="2400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
            善良
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut"
            data-sectime="2200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
            聪明
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut"
            data-sectime="2000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
            美丽
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut"
            data-sectime="1800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
            可爱
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut"
            data-sectime="1600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
            性感
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut"
            data-sectime="1400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
            贤惠
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut"
            data-sectime="1200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
            萝莉
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
            御姐
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7300" data-sec="zoomOut"
            data-sectime="800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
            女王
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 30%;width: 100%;text-align: center;">
            于一身
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
            的
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 50%;width: 100%;text-align: center;">
            新娘
          </h4>
          <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="flashing"
            data-time="900"
            style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

          </div>
          <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500"
            style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;">
            <p style="margin-top: 43%;color: #3a3f58;">新 娘👰</p>
            <img src="./public/meta/bride.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
          </div>
          <h3 class="js-animate animated animation-800" data-animate="fadeInRight" data-time="10500"
            style="position: absolute;top: 71%;width: 40%;right: 10%;text-align: center;">
            陈 林
          </h3>
        </div>
      </div>
      <div class="page page4" style="display: none;">
        <div class="photo-wrap">
          <div class="full-bg js-animate animated animation-5000"
            style="background-image: url(./public/photo/7.jpg);width: 100%;height: 100%;" data-sec="zoomCycle"
            data-time="0">
          </div>
          <div class="full-bg js-animate animated animation-600"
            style="background-image: url(./public/photo/8.jpg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
            data-animate="zoomIn" data-time="10500">
          </div>
          <div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="1000"
            data-sec="lightSpeedOut" data-sectime="7500">

          </div>
          <div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="2000"
            data-sec="lightSpeedOut" data-sectime="8000">
          </div>
        </div>
        <div class="ele-wrap">
          <h4 class="js-animate animated animation-800" data-animate="myzoomIn" data-time="1500" data-sec="zoomOut"
            data-sectime="800" style="position: absolute;top: 40%;width: 100%;text-align: center;">他不仅</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500"
            data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
            风趣</h4>
          <h4 class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY"
            data-sectime="500" style="position: absolute;top: 50%;width: 100%;text-align: center;">幽默</h4>

          <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000"
            data-sec="zoomOutDown" data-sectime="500"
            style="position: absolute;top: 45%;width: 100%;text-align: center;">
            <h4>器宇</h4>
            <h4>轩昂</h4>
          </div>
          <h2 class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut"
            data-sectime="3000" style="position: absolute;top: 35%;width: 100%;text-align: center;">
            而且
          </h2>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut"
            data-sectime="2600" style="position: absolute;top: 25%;left: 18%;text-align: center;">
            英俊
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut"
            data-sectime="2400" style="position: absolute;top: 35%;right: 20%;text-align: center;">
            潇洒
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut"
            data-sectime="2200" style="position: absolute;top: 48%;left: 22%;text-align: center;">
            聪明
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut"
            data-sectime="2000" style="position: absolute;top: 50%;right: 48%;text-align: center;">
            善良
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut"
            data-sectime="1800" style="position: absolute;top: 30%;left: 50%;text-align: center;">
            诚恳
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut"
            data-sectime="1600" style="position: absolute;top: 63%;right: 33%;text-align: center;">
            开朗
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut"
            data-sectime="1400" style="position: absolute;top: 36%;left: 25%;text-align: center;">
            才华
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut"
            data-sectime="1200" style="position: absolute;top: 53%;right: 25%;text-align: center;">
            细心
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 55%;left: 30%;text-align: center;">
            勤劳
          </h4>
          <h4 class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7300" data-sec="zoomOut"
            data-sectime="800" style="position: absolute;top: 20%;right: 30%;text-align: center;">
            总裁范
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 30%;width: 100%;text-align: center;">
            能做饭
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 40%;width: 100%;text-align: center;">
            会挣钱
          </h4>
          <h4 class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut"
            data-sectime="1000" style="position: absolute;top: 50%;width: 100%;text-align: center;">
            新郎
          </h4>
          <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="pulseing"
            data-time="900"
            style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

          </div>
          <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500"
            style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;">
            <p style="margin-top: 43%;color: #3a3f58;">新 郎🤵</p>
            <img src="./public/meta/lang.png" style="position: absolute;bottom: -6px;width: 120%;left: -10%;">
          </div>
          <h3 class="js-animate animated animation-800" data-animate="fadeInRight" data-time="10500"
            style="position: absolute;top: 71%;width: 40%;left: 10%;text-align: center;">
            魏 鹏
          </h3>
        </div>
      </div>
      <div class="page page5" style="display: none;">
        <div class="photo-wrap">
          <div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="500" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;
                        background-image: url(./public/photo/9.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="fadeInDown" data-time="3000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;
                        background-image: url(./public/photo/10.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="fadeInUp" data-time="6000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;
                        background-image: url(./public/photo/11.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="9000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;
                        background-image: url(./public/photo/12.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="rollIn" data-time="12000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;
                        background-image: url(./public/photo/18.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="15000"
            style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 6;
                        background-image: url(./public/photo/14.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="rotateIn" data-time="18000" style="position: absolute;width: 100%;height: 38%;top: 0;left: 0;z-index: 7;
                        background-image: url(./public/photo/15.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="18000"
            style="position: absolute;width: 100%;height: 62%;top: 38%;left: 0;z-index: 8;
                        background-image: url(./public/photo/16.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="21000"
            style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;
                        background-image: url(./public/photo/17.jpg);"></div>
          <div class="photo-box js-animate animated animation-2000" data-animate="zoomIn" data-time="24000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;
                        background-image: url(./public/photo/13.jpg);"></div>
          <h4 class="js-animate animated animation-2000" data-animate="myzoomIn" data-time="24000"
            style="position: absolute;width: 100%;bottom: 6%;left: 0;z-index: 11;text-align: center;line-height: 28px;color: red;">
            10月3日<br>
            💍邛崃市孔明街道（卧龙镇）胖哥成园
          </h4>
          <div class="text-frame js-animate animated" data-animate="zoomInLeft" data-time="1000" data-sec="pulseing"
            data-sectime="1000">
          </div>
          <div class="text-frame js-animate animated" data-animate="zoomInRight" data-time="1000" data-sec="pulseing"
            data-sectime="1500">
          </div>
        </div>
        <div class="ele-wrap">
        </div>
      </div>
      <div class="page page6" style="position: relative;display: none;">
        <div id="map"></div>
        <div id="location-btn">
          <i class="iconfont" style="font-size: 32px;">&#xe616;</i>
        </div>
        <div id="map-msg">
          <p class="js-animate animated" data-animate="bounceInDown" data-time="0">🥂邛崃市孔明街道（卧龙镇）胖哥成园（318国道旁）</p>
          <p class="js-animate animated" data-animate="bounceInLeft" data-time="1000">💎欢迎各位亲朋好友早请~</p>
          <p class="js-animate animated" data-animate="bounceInRight" data-time="2000"
            style="font-weight: bolder;color: red;">🎊文明婚礼，禁止婚闹。</p>
          <p class="js-animate animated" data-animate="bounceInUp" data-time="3000"><i
              class="iconfont red-icon">&#xe636;</i>有任何疑问请致电 新郎&新娘</p>
        </div>
      </div>
    </div>
    <span class="start">
      <div class="toast">上滑继续浏览</div>
      <i class="iconfont" style="color: #fff;font-size: 30px;">&#xe606;</i>
    </span>
    <audio id="mp3" src="./public/music/music.mp3" loop="-1"></audio>
    <script src="./public/js/js.fullpage.js"></script>
    <script src="./public/js/type.js"></script>
    <script type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=S6EO9oPso0n8aTMvfH1g0aLUX6vGZx1l"></script>
    <script>
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;   //判断是否是 android终端    

      // 滚屏动画控制

      var domLists = []
      var mapFlag = false
      var fullpage = null
      var typeTimeout = null

      function start() {
        clearInterval(loadTimer);
        var forEach = [].forEach;
        setTimeout(() => {
          document.getElementById('loading-mask').style.display = 'none'
        }, 100);

        fullpage = document.getElementsByClassName('wp-inner')[0].fullpage({
          change: function (e) {
            clearTime()

            // 移除动画属性
            forEach.call(document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate'), function (v) {
              v.classList.add('hide');
              v.classList.remove(v.dataset['animate']);
              if (v.dataset['sec']) {
                v.classList.remove(v.dataset['sec']);
              }
            });

          },
          afterChange: function (e) {
            domLists = document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate')
            forEach.call(domLists, v => {
              var time = v.dataset.time;
              v.timer = setTimeout(function () {
                v.classList.add(v.dataset['animate']);
                v.classList.remove('hide');
                if (v.dataset['sec']) {
                  var time = v.dataset.sectime || 0
                  v.sectimer = setTimeout(function () {
                    v.classList.remove(v.dataset['animate']);
                    v.classList.add(v.dataset['sec']);
                  }, time);
                }
              }, time);
            })
            setTimeout(() => {
              document.querySelectorAll('.page')[e.cur].style.display = "block"
              if (e.cur === 6 && !mapFlag) {
                initMap()
              }
            }, 0);
          }
        });
      }

      function clearTime() {
        domLists.forEach((dom, i, arr) => {
          if (dom.timer) {
            clearTimeout(dom.timer);
          }
          if (dom.sectimer) {
            clearTimeout(dom.sectimer);
          }
          if (arr && arr.splice) {
            arr.splice(i, 1)
          }
        })
      }

      // 地图
      function initMap() {
        if (window.BMap) {
          mapFlag = true
          var mapCenter = [103.420561, 30.332249]
          var map = new BMap.Map("map", { minZoom: 5, maxZoom: 19 })

          map.centerAndZoom(new BMap.Point(mapCenter[0], mapCenter[1]), 15);
          map.addControl(new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT
          }));
          map.enableContinuousZoom(); // 开启连续缩放效果  
          map.enableInertialDragging();　// 开启惯性拖拽效果 
          map.enableScrollWheelZoom(true);

          function ComplexCustomOverlay(point, text, mouseoverText) {
            this._point = point;
            this._text = text;
            this._overText = mouseoverText;
          }
          ComplexCustomOverlay.prototype = new BMap.Overlay();
          ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#E60000";
            div.style.borderRadius = "3px";
            div.style.color = "white";
            div.style.height = "18px";
            div.style.padding = "2px 4px";
            div.style.lineHeight = "18px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            // arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "0";
            arrow.style.height = "0";
            arrow.style.top = "22px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            arrow.style.border = "6px solid transparent";
            arrow.style.borderTop = "6px solid #E60000";
            div.appendChild(arrow);

            map.getPanes().labelPane.appendChild(div);

            return div;
          }
          ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 30 + "px";
          }

          var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(mapCenter[0], mapCenter[1]), "胖哥成园农家乐", "N and Y");

          map.addOverlay(myCompOverlay);

          document.querySelector('#location-btn').addEventListener('click', () => {
            map.panTo(new BMap.Point(mapCenter[0], mapCenter[1]))
          })
        }
      }

      // 音乐播放控制
      // Web Audio 初始化
      const soundBgm = new Howl({
        src: ["./public/music/music.mp3"],
        loop: true,
        preload: true,
      })
      window.onload = function () {
        let playBtn = document.querySelector('#play-btn')
        let mp3 = document.getElementById("mp3")
        mp3.load()
        mp3.play()
        playBtn.style.animationPlayState = 'running'
        document.addEventListener('WeixinJSBridgeReady', function () {
          if (isiOS) {
            mp3.play()
            playBtn.style.animationPlayState = 'running'
          }
          if (isAndroid) {
            // 音频资源 load 之后通过微信桥接触发播放
            soundBgm.on('load', () => {
              // 播放音频
              soundBgm.play();
              playBtn.style.animationPlayState = 'running'
            })
          }
        }, false);

        playBtn.addEventListener('click', function (event) {
          console.log("点击播放");
          if (isiOS) {
            if (mp3.paused) {
              this.style.animationPlayState = 'running'
              mp3.play()
            } else {
              this.style.animationPlayState = 'paused'
              mp3.pause()
            }
          } else if (isAndroid) {
            if (soundBgm.playing()) {
              this.style.animationPlayState = 'paused'
              soundBgm.pause()
            } else {
              this.style.animationPlayState = 'running'
              soundBgm.play();
            }
          }
        })
      }

      if (isMobile !== false) {
        var loadTimer = setInterval(() => {
          if (loadSum >= 17 && soundBgm.state() == "loaded") {
            start()
            type()
          }
        }, 300);
      }

      // <!-- 打字机效果 -->
      function type() {
        const obj = {
          output: '',
          isEnd: false,
          speed: 40,
          singleBack: false,
          sleep: 0,
          type: 'normal',
          backSpeed: 40,
          sentencePause: false
        }

        options = {
          "speed": 20,						//文字速度
          "selector": 'type1',				//选择器
          "startIndex": 0,					//从第几个字符开始打印
          "endIndex": 10,						//打印到第几个字符结束
          "hasCur": true,					//是否显示光标
          "curId": 'cur',					//光标的ID
          "curStr": '_',						//光标字符
          "curStyle": 'font-weight: bold;',	//光标的样式（CSS样式）
          "curSpeed": 100,					//光标速度（ms）
          "lnStr": ""							//行首字符
        };
        Printer.init(`
        ❤️❤️正在链接 "幸福服务器"...❤️❤️
        ❤️❤️链接建立成功❤️❤️
      
      [root ~]# 请输入密码
      [root ~]# *****
      [root ~]# 登录成功

      !// AI自动生成邀请函中~^

      $public class UserApplication {
      　public static void main(String[] args) {
      　　LoveUtils.WeddingShow(invite, love);
      　　System.out.println("2023年10月3日");
      　}
      }^

      !// 生成完成，立即编译执行~^

      [root ~]# $初始化完成...^
      [root ~]# $申请运行环境完成...^
      [root ~]# $编译完成...^
      [root ~]# $打包完成...^
      [root ~]# $部署完成...^
      [root ~]# $立即执行...^
      ####################### 100%

      -🤵‍♂️: 我们结婚啦~❤️‍🔥
      👰‍♀️: 我们结婚啦~❤️‍🔥^
       
      启动完成......

      上滑继续浏览
      `, options).print()

        typeTimeout = setTimeout(() => {
          fullpage.moveNext(true);
          clearTimeout(typeTimeout)
        }, 14000);
      }

    </script>
</body>

</html>